<template>
  <div id="panel">
    <el-card class="queryForm">
      <el-form
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        :label-position="'right'"
      >
        <!-- 改造核心：月选择器 → 年选择器，标签改为“选择年：” -->
        <el-form-item label="选择年：" prop="year">
          <el-date-picker
            v-model="queryParams.year"
            type="year"
            format="yyyy年"
            value-format="yyyy"
            placeholder="选择年份"
            class="year-picker"
            @change="handleYearChange"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
            style="padding: 10px"
            >查询</el-button
          >
          <!-- <el-button @click="resetQuery" style="padding: 10px">
            <i class="iconfont icon-saoba"></i>
            重置
          </el-button> -->
          <el-button type="primary" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="pageContent">
      <el-table
        id="selectTable"
        :data="tableList.rows"
        stripe
        :height="tableHeight"
        v-loading="loading"
        :span-method="objectSpanMethod"
        border
        :cell-style="cellStyle"
      >
        <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          align="center"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import tableToExcel from "@/utils/tableToExcel";
import getTime from "@/utils/getTime.js";
import { getYearReport } from "@/api/drinkingwatersource.js";

export default {
  name: "HydrologicStation",
  props: ["selTreeId"],
  components: {},
  computed: {},
  data() {
    return {
      tableHeight: window.innerHeight - 350,
      options: [],
      basinOptions: [],
      regionList: [],
      lakeList: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        year: "", // 核心参数：选中的年份（格式：yyyy，如"2025"，直接传递给接口）
      },
      tableList: {
        total: 0,
        rows: [],
      },
      columns: [],
      requestTimer: null, // 延迟请求定时器（原逻辑保留）
    };
  },
  watch: {
    selTreeId: {
      handler(newVal) {
        if (newVal) {
          this.selTreeId = newVal;
          this.getList(); // 有树ID时立即请求数据
          if (this.requestTimer) clearTimeout(this.requestTimer);
        } else {
          this.delayRequest(); // 无ID时延迟重试（原逻辑保留）
        }
      },
      deep: true,
    },
  },
  created() {
    // 初始化：默认选中当前年份（如2025年）
    this.setCurrentYear();
  },
  mounted() {
    this.pageInit(); // 页面初始化请求数据（原逻辑保留）
  },
  methods: {
    /**
     * 核心：单元格合并方法（实现整体水质、超标项横向合并）
     * @param {Object} param0 - 表格单元格参数（row：当前行数据，columnIndex：列索引）
     * @returns {Object} 合并配置（rowspan：行合并数，colspan：列合并数）
     */
    objectSpanMethod({ row, columnIndex }) {
      // 总列数 = 动态表头长度（确保合并范围适配表头）
      const totalColumnCount = this.columns.length;
      // 合并列数 = 总列数 - 1（排除第1列，从第2列合并到最后一列）
      const mergeColumnCount = totalColumnCount - 1;

      // 1. 处理“整体水质”行
      if (row?.column1 === "整体水质") {
        if (columnIndex === 0) {
          // 第1列：显示“整体水质”文本，不合并
          return { rowspan: 1, colspan: 1 };
        } else if (columnIndex === 1) {
          // 第2列：作为合并起始列，合并后续所有列
          return { rowspan: 1, colspan: mergeColumnCount };
        } else {
          // 第3列及以后：隐藏（被合并覆盖，避免重复显示）
          return { rowspan: 1, colspan: 0 };
        }
      }

      // 2. 处理“超标项”行
      if (row?.column1 === "超标项") {
        if (columnIndex === 0) {
          // 第1列：显示“超标项”文本，不合并
          return { rowspan: 1, colspan: 1 };
        } else if (columnIndex === 1) {
          // 第2列：作为合并起始列，合并后续所有列
          return { rowspan: 1, colspan: mergeColumnCount };
        } else {
          // 第3列及以后：隐藏
          return { rowspan: 1, colspan: 0 };
        }
      }

      // 3. 其他行：不合并
      return { rowspan: 1, colspan: 1 };
    },

    /**
     * 单元格样式（优化合并行视觉效果）
     * @param {Object} param0 - 单元格参数
     * @returns {Object} 样式配置
     */
    cellStyle({ row }) {
      // 合并行（整体水质/超标项）添加背景色，突出显示
      if (row?.column1 === "整体水质" || row?.column1 === "超标项") {
        return {
          backgroundColor: "#f0f7ff", // 淡蓝色背景
          fontWeight: "500", // 字体加粗
        };
      }
      return {};
    },
    // 延迟请求方法（原逻辑完全保留）
    delayRequest() {
      if (this.requestTimer) clearTimeout(this.requestTimer);
      this.requestTimer = setTimeout(() => {
        if (this.itemId) {
          this.getList();
        } else {
          this.delayRequest();
        }
      }, 1000);
    },

    // 初始化：设置当前年份为默认值
    setCurrentYear() {
      const today = new Date();
      const currentYear = today.getFullYear().toString(); // 直接获取当前年（如"2025"）
      this.queryParams.year = currentYear; // 赋值给查询参数，无需额外处理
    },

    // 年份选择变化时触发（可选：如需做额外逻辑可在此扩展）
    handleYearChange() {
      // 示例：若选择年份后需立即查询，可添加 this.getList()；当前保留原“点击查询按钮”逻辑
      // this.getList();
    },

    // 页面初始化（原逻辑保留）
    pageInit() {
      this.getList();
    },

    // 分页方法（原逻辑保留）
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },

    // 搜索按钮：重置页码并请求数据（原逻辑保留）
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    // 重置按钮：恢复为当前年份并清空表单
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm"); // 清空表单状态
      this.setCurrentYear(); // 重置后恢复默认值（当前年份）
      this.getList(); // 可选：重置后自动查询当前年数据
    },

    // 导出方法（原逻辑保留）
    handleExport() {
      tableToExcel.getExcel("#selectTable", "监测数据年报表");
    },

    // 核心：获取表格数据（仅传递 year 单一参数）
    getList() {
      console.log(">>>当前选择年份", this.queryParams.year);
      console.log(">>>当前树ID", this.selTreeId);

      // 构造请求参数：仅传递 year（如"2025"），移除原 start/endTime
      const query = {
        year: this.queryParams.year, // 核心参数：年份（直接传递，无需格式转换）
        id: this.selTreeId, // 原树ID参数（保留）
        pageNum: this.queryParams.pageNum, // 原分页参数（保留）
        pageSize: this.queryParams.pageSize, // 原分页参数（保留）
      };

      this.loading = true;
      // 调用接口：参数仅含 year，与后端需求匹配
      getYearReport(query)
        .then((res) => {
          this.tableList.total = res.total;
          this.tableList.rows = res.data.tableData;
          this.columns = res.data.tableOp;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false; // 异常时关闭加载状态
        });
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

img {
  vertical-align: middle;
}

#panel {
  padding-bottom: 0px;
  min-height: calc(100% - 20px);
  margin: 0;

  // 分页样式（原逻辑保留）
  .pagination-self {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
    position: relative;

    .el-pagination__total {
      position: absolute;
      left: 5px;
      color: #409eff;
      font-weight: 600;
      font-size: 15px;
    }
  }

  .refresh-button {
    .el-icon-refresh {
      font-size: 18px;
      line-height: 28px;
    }
  }

  .el-card {
    margin: 10px;
  }

  .queryForm .el-card__body {
    padding: 0 20px !important;
  }

  .queryForm {
    .el-form-item {
      margin: 10px 0 10px 10px;
    }

    .el-form-item:first-child {
      margin-left: 0 !important;
    }

    .el-form-item__label {
      padding-right: 5px;
      color: #555;
    }

    // 年份选择器宽度：与原月份选择器一致（220px），保持布局统一
    .year-picker {
      width: 220px;
    }

    .times {
      .el-form-item__content {
        width: 250px;
      }
    }

    .el-form-item__content {
      min-width: 220px; // 匹配年份选择器宽度，避免布局错乱
    }

    .searchBtnBox {
      display: inline-block;
      margin: 20px 0 20px 20px;
    }
  }

  .pageContent {
    .tabs-list {
      padding-top: 20px;
    }

    .el-tabs__header {
      background: #fff;
    }

    .el-tabs__item {
      border: 1px solid #eee;
      margin: 0;
      border-left: 0;
      background: #fafbfc;
      color: #000;
    }

    .el-tabs__item:first-child {
      margin-left: 20px;
      border-left: 1px solid #eee;
    }

    .is-active {
      border-bottom: 0 !important;
      background: #fff;
      color: #307eff;
    }
  }

  .anjian label {
    padding: 0 !important;
    width: 100px !important;
  }

  .queryForm .el-checkbox {
    margin-right: 10px !important;
    width: auto !important;
  }

  .iszgfc .el-form-item__content {
    width: 120px;
  }
}

// 标题样式（原逻辑保留）
.titleBox {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe4ed;
  margin: 0 20px 20px 20px;
  position: relative;

  &::before {
    display: block;
    content: "";
    width: 3px;
    height: 16px;
    background: #307eff;
  }

  .title {
    font-size: 16px;
    color: #000;
    position: absolute;
    left: 10px;
    font-weight: 500;
  }

  .more {
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }
}
</style>
